{% extends "learning/base.html" %}

{% block title %}信件中心 · 高中数学助手{% endblock %}

{% block content %}
<section class="card" style="max-width:900px;margin:2rem auto;">
    <div style="margin-bottom:2rem;">
        <h2 style="margin:0 0 0.5rem 0;">📬 信件中心</h2>
        <p style="margin:0;color:var(--text-secondary);font-size:1rem;">
            查看来自老师和系统的最新消息，已读信件会自动归档
        </p>
    </div>
    
    {% if notifications %}
        <div style="display:grid;gap:1rem;">
            {% for notification in notifications %}
                <article style="padding:1.25rem 1.5rem;border-radius:var(--radius-lg);background:var(--surface-elevated);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:all var(--transition-base);"
                         onmouseover="this.style.boxShadow='var(--shadow-md)';this.style.transform='translateY(-2px)'"
                         onmouseout="this.style.boxShadow='var(--shadow-sm)';this.style.transform=''">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0.75rem;flex-wrap:wrap;">
                        <div style="display:flex;align-items:center;gap:0.75rem;flex:1;">
                            <div style="width:40px;height:40px;border-radius:var(--radius-md);background:var(--accent-soft);display:grid;place-items:center;font-size:1.25rem;flex-shrink:0;">
                                📧
                            </div>
                            <div style="flex:1;">
                                <strong style="color:var(--text-primary);font-size:1.0625rem;display:block;margin-bottom:0.25rem;">
                                    {{ notification.title }}
                                </strong>
                                <small style="color:var(--text-tertiary);font-size:0.8125rem;">
                                    {{ notification.created_at|date:"Y-m-d H:i" }}
                                </small>
                            </div>
                        </div>
                        {% if not notification.is_read %}
                            <span class="pill" style="background:var(--danger-light);color:var(--danger);">新消息</span>
                        {% endif %}
                    </div>
                    {% if notification.message %}
                        <div style="padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);">
                            <p style="margin:0;white-space:pre-wrap;color:var(--text-primary);line-height:1.7;">
                                {{ notification.message }}
                            </p>
                        </div>
                    {% endif %}
                    {% if notification.link %}
                        <div style="margin-top:1rem;">
                            <a class="button small secondary" href="{{ notification.link }}">
                                查看详情 →
                            </a>
                        </div>
                    {% endif %}
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:4rem 2rem;">
            <div style="font-size:4rem;margin-bottom:1rem;opacity:0.3;">📭</div>
            <h3 style="margin:0 0 0.5rem 0;color:var(--text-primary);">暂时没有新消息</h3>
            <p style="margin:0;color:var(--text-secondary);">
                当老师发布公告或批阅你的错题时，会在这里显示通知
            </p>
        </div>
    {% endif %}
</section>
{% endblock %}
